<template>
  <div class="returnTicketDetails_container">
    <el-scrollbar height="calc( 100vh - 180px)">
      <el-card class="box-card" shadow="always" style="background: #fafafa">
        <template #header>
          <div class="card-header" style="padding-bottom: 4px">
            <span>基本信息</span>
          </div>
        </template>
        <div>
          <el-form
            ref="elderFormRef"
            :model="form"
            :rules="rules"
            label-width="110px"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="客户姓名:" style="font-weight: 700">
                  <span style="font-weight: 500">{{ form.applyName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别:" style="font-weight: 700">
                  <span style="font-weight: 500">
                    {{
                      sys_user_sex.find((item) => item.value == form.sex)
                        ? sys_user_sex.find((item) => item.value == form.sex)
                            .label
                        : ""
                    }}</span
                  >
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="年龄:" style="font-weight: 700">
                  <span style="font-weight: 500">{{ form.age }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系电话:" style="font-weight: 700">
                  <span style="font-weight: 500">{{ form.telephone }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="服务地址:" style="font-weight: 700">
                  <span style="font-weight: 500">{{ form.address }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="服务状态:" style="font-weight: 700">
                  <span style="font-weight: 500">
                    {{
                      order_status.find((item) => item.value == form.status)
                        ? order_status.find((item) => item.value == form.status)
                            .label
                        : ""
                    }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="下单时间:" style="font-weight: 700">
                  <span style="font-weight: 500">{{ form.createTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="工单编号:" style="font-weight: 700">
                  <span style="font-weight: 500">{{ form.workOrderCode }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
      <el-card
        class="box-card"
        shadow="always"
        style="background: #fafafa; margin-top: 20px"
      >
        <template #header>
          <div class="card-header" style="padding-bottom: 4px">
            <div
              class="card-header"
              style="
                padding-bottom: 4px;
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <span>服务项目</span>
            </div>
          </div>
        </template>
        <div>
          <el-table :data="servicePlanList" stripe border max-height="250">
            <el-table-column
              label="服务项目"
              align="center"
              prop="serviceItemName"
            />

            <el-table-column
              label="单价（元）"
              align="center"
              prop="unitPrice"
            />
            <el-table-column label="单位" align="center">
              <template #default="scope">
                <span>
                  {{
                    bed_uint.find((item) => item.value == scope.row.unit)
                      ? bed_uint.find((item) => item.value == scope.row.unit)
                          .label
                      : ""
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="社区站点佣金（元）"
              align="center"
              prop="commission"
            ></el-table-column>
            <el-table-column
              label="计划开始时间"
              align="center"
              prop="planBeginTime"
            />
            <el-table-column
              label="计划结束时间"
              align="center"
              prop="planEndTime"
            />
            <el-table-column
              label="服务站点"
              align="center"
              prop="communitySiteName"
            >
            </el-table-column>
            <el-table-column
              label="服务人员"
              align="center"
              prop="communitySitePersonnelName"
            >
            </el-table-column>
            <el-table-column
              label="合计金额（元）"
              prop="unitPrice"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-card
        class="box-card"
        shadow="always"
        style="background: #fafafa; margin-top: 20px"
      >
        <template #header>
          <div class="card-header" style="padding-bottom: 4px">
            <div
              class="card-header"
              style="
                padding-bottom: 4px;
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <span>服务执行</span>
            </div>
          </div>
        </template>
        <div>
          <el-row style="padding: 20px">
            <el-col :span="8">
              <span style="font-weight: 500">服务开始时间：</span>
              <span>{{ form.signInBeginTime }}</span>
            </el-col>
            <el-col :span="8">
              <span style="font-weight: 500">服务结束时间：</span>
              <span>{{ form.signOutEndTime }}</span>
            </el-col>
            <el-col :span="8">
              <span style="font-weight: 500">服务时长：</span>
              <span>{{ form.serviceDuration }}</span>
            </el-col>
          </el-row>
          <div style="display: flex; padding: 20px">
            <div style="font-weight: 500; margin-left: 30px">现场照片:</div>
            <div>
              <div
                v-for="(item, index) in form.photoList"
                :key="index"
                style="display: inline-block; margin-left: 20px"
              >
                <el-image
                  style="width: 200px; height: 200px"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[item.imgUrl]"
                  :src="item.imgUrl"
                />
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card
        class="box-card"
        shadow="always"
        style="background: #fafafa; margin-top: 20px"
      >
        <template #header>
          <div class="card-header" style="padding-bottom: 4px">
            <div
              class="card-header"
              style="
                padding-bottom: 4px;
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <span>回访信息</span>
            </div>
          </div>
        </template>
        <div>
          <el-form
            ref="revisitFormRef"
            :model="revisitForm"
            :rules="rules"
            label-width="110px"
          >
            <el-form-item label="客户满意度" prop="customerSatisfaction">
              <el-select
                v-model="revisitForm.customerSatisfaction"
                clearable
                :disabled="status != '0'"
                placeholder="请选择客户满意度"
                style="width: 200px"
              >
                <el-option
                  v-for="dict in customer_satisfaction"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="回访内容" prop="revisitContent">
              <el-input
                v-model="revisitForm.revisitContent"
                type="textarea"
                :disabled="status != '0'"
                show-word-limit
                maxlength="500"
                :autosize="{ minRows: 2, maxRows: 10 }"
                placeholder="请输入回访内容"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card
        class="box-card"
        shadow="always"
        style="background: #fafafa; margin-top: 15px"
      >
        <div
          style="text-align: right; padding-right: 50px"
          v-if="status == '0'"
        >
          <el-button
            type="primary"
            style="margin-left: 20px"
            @click="submitFormDebounceHandler"
            >确 定</el-button
          >
          <el-button @click="cancel">取 消</el-button>
        </div>
        <div style="text-align: right; padding-right: 50px" v-else>
          <el-button @click="cancel">返 回</el-button>
        </div>
      </el-card>
    </el-scrollbar>
  </div>
</template>
<script setup>
import { WorkOrderInfo, updateRevisitInfo } from "@/api/order";
import { debounce } from '@/utils/debounce.js';
const { proxy } = getCurrentInstance();
const { sys_user_sex, order_status, bed_uint, customer_satisfaction } =
  proxy.useDict(
    'sys_user_sex',
    "order_status",
    'bed_uint',
    'customer_satisfaction',
  )
const router = useRouter();
const route = useRoute();
const routerVal = ref("");
const status = ref('');
const servicePlanList = ref([]);
const data = reactive({
  form: {},
  revisitForm: {},
  rules: {
    customerSatisfaction: [
      { required: true, message: '请选择客户满意度', trigger: 'change' },
    ],
    revisitContent: [
      {
        required: false,
        min: 0,
        max: 500,
        message: '服务内容不超过500个字符',
        trigger: 'blur',
      },
    ],
  },
});
const { form, rules, revisitForm } = toRefs(data);
const submitFormDebounceHandler = debounce(submitForm, 500)
function submitForm() {
  proxy.$refs["revisitFormRef"].validate((valid) => {
    if (valid) {
      updateRevisitInfo(revisitForm.value).then((res) => {
        proxy.$modal.msgSuccess('回访成功');
        router.push('/ticketManagement/returnVisitManagement');
      })
    }
  });
}
async function getWorkOrderInfo(id) {
  const res = await WorkOrderInfo(id);
  form.value = res.workOrderInfo;
  revisitForm.value.id = res.workOrderInfo.id
  revisitForm.value.customerSatisfaction =
    res.workOrderInfo.customerSatisfaction
  revisitForm.value.revisitContent = res.workOrderInfo.revisitContent
  const obj = {
    serviceItemName: form.value.serviceItemName,
    commission: form.value.commission,
    communitySiteName: form.value.communitySiteName,
    communitySitePersonnelName: form.value.communitySitePersonnelName,
    planBeginTime: form.value.planBeginTime,
    planEndTime: form.value.planEndTime,
    totalPrice: form.value.totalPrice,
    unit: form.value.unit,
    unitPrice: form.value.unitPrice,
  };
  servicePlanList.value.push(obj);
}
function cancel() {
  router.go(-1)
}
const stopWatch = watch(
  () => route,
  (newVal, oldVal) => {
    routerVal.value = newVal.params.id;
    status.value = newVal.params.status
    getWorkOrderInfo(routerVal.value);
  },
  { immediate: true },
);
// getServiceItemSelectOptionsData();
onBeforeUnmount(() => {
  stopWatch();
})
</script>
<style scoped lang="scss">
.returnTicketDetails_container {
  padding: 20px;
}
</style>
